<template>
  <div>
    <div class="platform">
      <Top :title="detailData.abbreviation" iconShow="1"></Top>
      <div class="platform-top">
        <div class="platform-top-detail">
          <div class="platform-top-detail-logo">
            <img :src="detailData.logo" />
            <p>{{detailData.abbreviation}}</p>
          </div>
          <p @click="collect" class="platform-top-detail-collect" v-if="!isCollect">
            +收藏
          </p>
          <p class="platform-top-detail-collect collected" v-else>
            已收藏
          </p>
          <div style="width:1px;height:1.4rem;background:#fff;margin-top:1rem;"></div>
          <div class="platform-top-detail-person">
            <!-- <p>申请人数(人)</p>
            <span>{{detailData.statistics}}</span> -->
            <p>额度(元)</p>
            <span>{{detailData.quato}}</span>
          </div>
        </div>
        <div class="platform-top-advantage">
          <ul>
            <li>
              <!-- <p>{{detailData.quato}}</p>
              <span>额度(元)</span> -->
              <p>{{detailData.maxCycle}}</p>
              <span>期限(天)</span>
              <div></div>
            </li>
            <li>
              <!-- <p>{{detailData.maxCycle}}</p>
              <span>期限(天)</span> -->
              <p>{{detailData.dailyInterestRate}}%</p>
              <span>日利率(%)</span>
              <div></div>
            </li>
            <li>
              <!-- <p>{{detailData.dailyInterestRate}}%</p>
              <span>参考利率</span> -->
              <p>{{detailData.statistics}}</p>
              <span>申请人数(人)</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="platform-content">
        <div class="platform-content-condition">
          <p>申请条件</p>
          <div v-for="(item,index) in detailData.applyCondition" :key="index">{{item}}</div>
        </div>
        <div class="platform-content-material">
          <p>所需材料</p>
          <div>{{detailData.requireDocument}}</div>
        </div>
        <div class="platform-content-flow">
          <p>{{detailData.abbreviation}}介绍</p>
          <div style="line-height:0.6rem;font-size:0.36rem;color:#6d6d6d;word-wrap:break-word;" v-for="(item,index) in detailData.introduction" :key="index">{{item}}</div>
        </div>
        <!-- 添加立即申请按钮 -->
        <div class="platform-content-button" @click="goProductPage(detailData.link)">
             立即申请
        </div>
      </div>
    </div>
     <!-- 引用相关推荐模块 -->
    <!-- <recommend></recommend> -->
     <div class="father">
            <div class="recommend">
                <div class="recommend-title">
                      <span>一 产品推荐 一</span>
                     <a href="/loan/index.html"><span class="recommend-title-right">更多推荐<i class="iconfont icon-jiankuohaoxiyou"></i></span></a>
                </div>
                <div class="recommend-content clearfix">
                    <ul>
                      <li v-for="(item,index) in recommendList" :key="index" @click="recommend(item.platformId)">
                        <div class="recommend-content-log">
                          <img :src="item.logo"  alt="贷款">
                        </div>
                        <p class="recommend-content-title">{{item.abbreviation}}</p>
                        <div class="recommend-content-memoy">
                          <p><span>¥</span><span>{{item.quato}}</span></p>
                          <span class="recommend-content-memoy-range">额度范围&nbsp;(元)</span>
                        </div>
                        <div class="recommend-content-apply">
                            立即申请
                        </div>
                      </li>
                    </ul>
                </div>
            </div>
        </div>
     </div>
</template>
<script>
import Vue from "vue";
import "../../../js/lib/flexble.js";
import util from "../../../js/lib/util.js";
import commons from "../../../common/js/common.js";
import Top from "components/Header/Header";
import Foot from "components/Footer/Footer";
import { MessageBox, Indicator } from "mint-ui";

export default {
  name: "Product",
  components: { Top, Foot },
  data() {
    return {
      // 详情页面的数据初始化
      recommendList: [],
      isCollect:false,
      detailData: "",
      channel: window.sessionStorage.getItem("channel")
        ? window.sessionStorage.getItem("channel")
        : ""
    };
  },
  methods: {
     recommend(id){
       // 调用产品详情接口
        this.$http.get("/loansupermarket-app/platform/getPlatformDetail?platformId=" + id + '&status=' + 2)
          .then((response) => {
            var resBody = response.body;
            if (resBody.code == '000') {
              this.detailData = resBody.data;
          this.recommendList = resBody.data.productList;
              this.isCollect = resBody.data.isCollect == 1 ? true : false;
              // 把申请条件返回数据变成单条，也就是把‘\n’变成换行标签
              this.detailData.applyCondition = this.detailData.applyCondition.split('\n');
              // 把开心钱包介绍描述变成单条
              this.detailData.introduction = this.detailData.introduction.split('\n');
            } else {
              MessageBox.alert(resBody.mesg, '提示');
            }
          })

          //触发产品推荐列表
          //  this.product(id);
            //注意这个请求是为后面的我的足迹中的产品添加记录
            this.$http.post('/loansupermarket-app/foot/insertInformationVisit',{token:commons.getCookie('token'),visitType:3,informationId:id}).then(()=>{
            });
           document.body.scrollTop=0;
    },
    collect(){
      let messageId = this.id, that = this;
      this.$http
        .post(`/loansupermarket-app/collect/insertInformationVisit`, {
          token:commons.getCookie('token'),
          visitType: 3,
          informationId: messageId
        })
        .then((response)=> {
          var resBody = response.body,
            { code, data } = resBody;
          if (code == "000") {
              that.isCollect = true;
              console.log(that.isCollect)
          } else
          if(code == "444"){
            location.href = commons.paths+'/user/login.html?history=1'
          }else{
            MessageBox.alert(resBody.mesg);
          }
        });
    },
    goProductPage(url) {
      // 从cookie取token，从url上取id
      var token = commons.getCookie('token');
      var id = util.getQueryString('id');
      // post参数
      var postData = {
        token: token,
        productId: id
      };
      var status = util.getQueryString('status');
      var index = util.getQueryString('index');
      // 当访问流量统计成功后，调用添加申请记录接口
      this.$http.post("/loansupermarket-app/personal/addApply", postData)
        .then((response) => {
          var resBody = response.body;
          if (resBody.code == '000') {   
            // 如果申请记录添加成功，跳转到第三方产品链接
            this.$http.get("/loansupermarket-app/platform/clickCount?platformId=" + id+"&channel="+this.channel)
              .then((response) => {
                var resBody1 = response.body;
                if (resBody1.code == '000') {
                  // 如果申请记录添加成功，跳转到第三方产品链接
                  console.log(url);
                  window.location.href = url;
                }else{
                  MessageBox.alert(resBody1.mesg, '提示');
                }
              })
          } else if (resBody.code == '444') {
            // 如果code返回444，那么跳转到登录页去登录
            location.href = `${commons.paths}/user/login.html?id=${id}&status=${status}&index=${index}`;
          } else {
            // 申请记录添加失败，返回相应的信息
            MessageBox.alert(resBody.mesg, '提示');
          }
        })
    }
    // product(id){
    //    this.$http.get("/loansupermarket-app/platform/getProductRecommendation?platformId="+id)
    //       .then((response)=>{
    //             var resBody = response.body;
    //             if (resBody.code == '000') {
    //               // 如果接口请求成功列表实例化
    //               this.recommendList = resBody.data;
    //             } else {
    //               MessageBox.alert(resBody.mesg);
    //             }
    //   });
    // }
  },
  mounted() {
    Vue.http.interceptors.push((request, next) => {
      //请求拦截器
      //请求前
      request.headers.set("token", commons.getCookie("token")); //设置请求头
      Indicator.open("加载中..."); //请求loading
      next(response => {
        //请求后
        Indicator.close(); //隐藏loading
        return response;
      });
    });
    // 从url参数上取id和status
    var id = commons.getParameter("id");
    var status = commons.getParameter("status");
    this.id = id;
    //产品的相关推荐

    /// 统计访问流量
    var token = commons.getCookie('token') || '';
    this.$http.post("/loansupermarket-app/platform/visitCount", { token: token, platformId: id,phone:window.sessionStorage.getItem('phone'),channel:window.sessionStorage.getItem('channel')?window.sessionStorage.getItem('channel'):'' })
      .then(function(response) {})
    // 调用产品详情接口
    this.$http.get("/loansupermarket-app/platform/getPlatformDetail?platformId=" + id + '&status=' + status)
      .then((response) => {
        var resBody = response.body;
        if (resBody.code == '000') {
          this.detailData = resBody.data;
          this.recommendList = resBody.data.productList;
          // 把申请条件返回数据变成单条，也就是把‘\n’变成换行标签
          this.detailData.applyCondition = this.detailData.applyCondition.split('\n');
          // 把开心钱包介绍描述变成单条
          this.detailData.introduction = this.detailData.introduction.split('\n');
          this.isCollect = resBody.data.isCollect == 1 ? true : false;
        } else {
          MessageBox.alert(resBody.mesg, '提示');
        }
      })
  }
};
</script>
<style lang="scss" scoped>
@import "../../../scss/base.scss";
.platform {
  margin-top: 1.2rem;
  margin-bottom:rem(40);
  box-sizing: border-box;
  background: #fff;
  .header {
    background: url('../../../assets/header.png');
    background-size: 100%, 100%;
  }
  &-top {
    height: 4.15rem;
    width: 100%;
    background: url('../../../assets/headerbanner.png');
    background-size: 100%, 100%;
    position: relative;
    &-detail {
      width: 100%;
      height: 100%;
      display: flex;
      box-sizing: border-box;
      padding: 0 0.4rem;
      &-collect{
        position: absolute;
        right: .6rem;
        width: 1.6rem;
        height: .8rem;
        line-height: .75rem;
        border: 1px solid #ffffff;
        border-radius: 3px;
        color: #ffffff;
        font-size: .4rem;
      }
      .collected{
        background: $grayColor;
      }
      &-logo {
        height: 100%;
        width: 3.16rem;
        overflow: hidden;

        img {
          margin-top: 0.64rem;
          width: 1.34rem;
          height: 1.34rem;
          border-radius: 50%;
        }
        p {
          margin-top: 0.2rem;
          font-size: 0.4rem;
          color: #fff;
        }
      }
      &-person {
        width: 4.67rem;
        height: 100%;
        margin-left: 1.37rem;
        text-align: left;
        color: #fff;
        p {
          font-size: 0.34rem;
          margin-top: 1rem;
        }
        span {
          font-size: 0.58rem;
          line-height: 1.34rem;
          text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
        }
        div {
          font-size: 0.33rem;
        }
      }
    }
    &-advantage {
      width: 9.2rem;
      height: 1.6rem;
      background: #fff;
      position: absolute;
      border-radius: 0.07rem;
      left: 0.4rem;
      bottom: -0.84rem;
      box-shadow: 0px 8px 17px #effcfc;
      ul {
        display: flex;
        li {
          position: relative;
          width: 33.3%;
          &:nth-of-type(1) p,
          &:nth-of-type(2) p {
            color: $redColor;
          }

          &:nth-of-type(3) p {
            color: #6fd8fc;
          }
          p {
            line-height: 0.9rem;
            font-size: 0.36rem;

            height: 0.9rem;
            font-weight: bold;
          }
          span {
            font-size: 0.34rem;
          }
          div {
            position: absolute;
            right: 0;
            top: 0.54rem;
            width: 1px;
            height: 0.54rem;
            background: $silverColor;
          }
        }
      }
    }
  }
  &-content {
    padding: 0  0.4rem rem(40) 0.4rem;
    text-align: left;
    width: 100%;
    background: #fff;
    margin-top: 1.2rem;
    box-sizing: border-box;
    &-condition,
    &-material,
    &-flow {
      // padding-top: 0.2rem;
      box-sizing: border-box;
      padding: 0.2rem 0.4rem 0.4rem 0.4rem;
      border-bottom: 1px solid $borderColor;
      p {
        font-size: 0.38rem;
        margin-top: 0.2rem;
        margin-bottom: 0.2rem;
        &:nth-of-type(1) {
          border-left: 2px solid #30ccdb;
          height: 0.3rem;
          line-height: 0.36rem;
          padding-left: 0.3rem;
        }
      }
    }
    &-flow {
      border: none;
    }
    &-button {
      margin-top: rem(40);
      text-align: center;
      width: 100%;
      height: 1.2rem;
      font-size: 0.42rem;
      background: -webkit-linear-gradient(left, #2ce9e8, #7dd7ff) !important;
      box-shadow: 0 -6px 6px rgba(255, 255, 255, 0.6);
      color: #fff;
      line-height: 1.2rem;
      border-radius: 5px;
      &:active {
        background: #46d7db;
      }
  }
  }
}
.recommend{
  padding: 0px rem(30);
  &-title{
    position: relative;
    box-sizing: border-box;
    margin-bottom: rem(30);
    font-size: rem(32);
    font-weight: bold;
    color: #333333;
    &-right{
      position: absolute;
        right: 0px;
      font-weight: normal;
      color:#00dada;
      font-size: rem(26);
    }
  }
  &-content{
    //margin-top:1rem;
    box-sizing: border-box;
        li{
          position: relative;
            box-sizing: border-box;
            width:rem(330);
            height: rem(300);
            background:white;
            float: left;
            margin:0.6rem 3px;
            border-radius:8px;
            .recommend-content-log{
               position: absolute;
               top: -0.75rem;
               left: 50%;
               margin-left: -0.75rem;
              border-radius: 50%;
               width:1.5rem;
               height:1.5rem;
               img{
                  border-radius: 50%;
                 width: 100%;
                 height:100%;
                 display: block;
               }
            }
            .recommend-content-title{
                margin-top:0.8rem;
                font-size: rem(30);
                color: #333333;
            }
            .recommend-content-memoy{
              p{
                margin: rem(10) 0px;
                font-size: rem(40);
                color: #ff5b52;
                span:nth-of-type(1){
                  padding-right:2px;
                   font-size: rem(30);
                }
              }
              &-range{
                font-size:rem(24);
                color: #999999;
              }
            }
            .recommend-content-apply{
              position: absolute;
              bottom: 0px;
                width: 100%;
                height:rem(70);
                font-size: 0.42rem;
                background: -webkit-linear-gradient(left, #2ce9e8, #7dd7ff) !important;
                box-shadow: 0 -6px 6px rgba(255, 255, 255, 0.6);
                color: #fff;
                line-height:rem(70);
                 border-radius:0 0 8px 8px;
                &:active {
                  background: #46d7db;
                }
            }
        }
  }
}
</style>
